<template>
  <div class="calendar">
    <el-calendar v-model="value" @selectDate="selectDate" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(new Date())
function selectDate(e) {
  // console.log(e)
}
</script>
<style scoped lang="scss">
$bg: rgba(13, 13, 13, 0.5);
$bg2: #1f2529;
.calendar {
  width: 100%;
  padding: 20px;
  background-color: $bg2;
  margin-bottom: 10px;
  border-radius: 20px;

  :deep(.el-calendar) {
    background-color: $bg2;

    >div {
      padding: 10px;
    }

    .is-selected {
      color: red;
      background-color: $bg;
    }

    .el-calendar-day {
      height: 36px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .el-calendar-day:hover{
      color: red;
      background-color: $bg;
    }
  }
}
</style>
